<%--
  Created by IntelliJ IDEA.
  User: 10171
  Date: 2020/9/28
  Time: 13:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css/"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css/"/>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<head>
    <title>班级信息管理</title>
</head>
<body>
<div>
    <button class="button" onclick="addClass()">添加班级</button>
</div>
<div class="margin">
    <table class="table">
        <thead>
        <tr>
            <td>班级编号</td>
            <td>班级名</td>
            <td>院系编号</td>
            <td>班主任编号</td>
            <td>班主任</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
</div>
<%--分页区域--%>
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="3" select="selected">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
</select> 条数据，当前是第<span id="currentPageSpan"></span> 页，
    总共<span id="totalPageSpan" onchange="AllPage()"></span>页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastpage()">尾页</button>

</div>
<%--这里的div做一个编辑班级信息的模态框--%>
<div class="modal" id="editModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>班级信息编辑</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">班级名</label>
                <input class="form-control" type="text" id="classnameInput" placeholder="请输入班级名"></br>
                <label class="control-label">院系编号</label>
                <input class="form-control" type="text" id="facultyIdInput" placeholder="请输入院系编号"></br>
                <label class="control-label">班主任编号</label>
                <input class="form-control" type="text" id="headTeacherIdInput" placeholder="请输入班主任编号"></br>
                <label class="control-label">班主任</label>
                <input class="form-control" type="text" id="headTeacherInput" placeholder="请输入班主任"></br>
               <input type="hidden" id="classIdInput">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="editConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="addModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>班级信息编辑</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">班级名</label>
                <input class="form-control" type="text" id="classnameInputAdd" placeholder="请输入班级名"></br>
                <label class="control-label">院系编号</label>
                <input class="form-control" type="text" id="facultyIdInputAdd" placeholder="请输入院系编号"></br>
                <label class="control-label">班主任编号</label>
                <input class="form-control" type="text" id="headTeacherIdInputAdd" placeholder="请输入班主任编号"></br>
                <input type="hidden" id="classIdInputAdd">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="addConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    var currentPage=1;
    var pageSize=3;
    var totalPage;
    $(function()
    {
        //classLoadList();
        classLoadListByPage();
    });
    function AllPage() {
        pageSize=$("#currentPageSpan").val();
        classLoadListByPage();
    }
    //用户修改的每页记录数
    function onSelectChange() {
        pageSize=$("#pageSizeSelect").val();
        currentPage=1;
        classLoadListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage=1;
        classLoadListByPage();
    }
    //上一页的回调方法
    function prePage() {
        currentPage--;
        if (currentPage<1){
            currentPage=1;
        }
        classLoadListByPage();
    }
    //下一页
    function nextPage() {
        currentPage++;
        if (currentPage>totalPage){
            currentPage=totalPage;
        }
        classLoadListByPage();
    }
    function lastpage() {
        currentPage=totalPage;
        classLoadListByPage();

    }
    function  showClassList(classList){
        console.log(JSON.stringify(classList));
        var html='';
        for (let i = 0; i <classList.length ; i++) {
            let  item =classList[i];
            console.log(JSON.stringify(item));
            html+="<tr>";
            html+="<td>"+item.id +"</td>";
            html+="<td>"+item.name +"</td>";
            html+="<td>"+item.faculty.id +"</td>";
            html+="<td>"+item.teacher.id+"</td>";
            html+="<td>"+item.teacher.name+"</td>";
            html+="<td><button class='button' onclick='getClassDetail(\"" + item.id + "\")'>编辑</button>" +
                "<button class='button' onclick='deleteOneClass(\""+item.id+"\")'>删除</button></td>";
            html+="</tr>";
        }
        $("#tb").html(html);
    }
    function classLoadList() {
        $.ajax({
           url:"${pageContext.request.contextPath}/class/getClassList",
            type:"get",
            dataType:"json",
            success:function (result) {
               if (result.code==0){
                   showClassList(result.classList);
               }
            },
            error:function (err) {
               console.log(JSON.stringify(err));
            }
        });
    }
    function classLoadListByPage(){
        $.ajax({
            url:"${pageContext.request.contextPath}/class/getClassListByPage",
            type:"get",
            data:{"currentPage":currentPage,"pageSize":pageSize},
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    showClassList(result.classList);
                    totalPage=result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function addClass() {
        //显示用户编辑的模态框
        showEditModal();
    }
    //获取一个用户的详细信息
    function getClassDetail(id){
        $.ajax({
            url: "${pageContext.request.contextPath}/class/getOneClass",
            type: 'get',
            data:{"id":id}, //传递班级id
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    //显示用户编辑模态框
                    showEditModal(result.classes);
                }else{
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    //显示用户编辑的模态框
    function showEditModal(classes) {
        if (classes != null) {
            $("#classIdInput").val(classes.id);
            $("#classnameInput").val(classes.name);
            $("#facultyIdInput").val(classes.faculty.id);
            $("#headTeacherIdInput").val(classes.teacher.id);
            $("#headTeacherInput").val(classes.teacher.name);
            $("#headTeacherInput").attr("disabled","disabled");
            $("#editModal").modal("show");
        }else{
            //数据归0
            $("#classIdInput").val(0);
            $("#classnameInput").val("");
            $("#facultyIdInput").val("");
            $("#headTeacherIdInput").val("");
            $("#headTeacherInput").val("");
            $("#addModal").modal("show");
        }
    }
    function editConfirm(){
        var classesIdValue = $("#classIdInput").val();
        var classesnameValue = $("#classnameInput").val();
        var fasultyIdValue = $("#facultyIdInput").val();
        var teacherIdValue=$("#headTeacherIdInput").val();
        var teacherValue=$("#headTeacherInput").val();

        var fasultyValue ={id:fasultyIdValue}
        var headTeacherValue={id:teacherIdValue,name:teacherValue}

        var dataValue = {id:classesIdValue, name:classesnameValue,faculty:fasultyValue,teacher:headTeacherValue};
        $.ajax({
            url: '${pageContext.request.contextPath}/class/edit',
            type: 'post', //使用post提交大量数据
            contentType: 'application/json', //指明是个json格式请求参数
            data:JSON.stringify(dataValue), //传递用户编辑后的信息,这里必须是字符串
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态编辑框
                    classLoadListByPage();
                }else{
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function addConfirm(){
        var classesIdValue = $("#classIdInputAdd").val();
        var classesnameValue = $("#classnameInputAdd").val();
        var fasultyIdValue = $("#facultyIdInputAdd").val();
        var teacherIdValue=$("#headTeacherIdInputAdd").val();

        var fasultyValue ={id:fasultyIdValue}
        var headTeacherValue={id:teacherIdValue}

        var dataValue = {id:classesIdValue, name:classesnameValue,faculty:fasultyValue,teacher:headTeacherValue};
        $.ajax({
            url: '${pageContext.request.contextPath}/class/add',
            type: 'post', //使用post提交大量数据
            contentType: 'application/json', //指明是个json格式请求参数
            data:JSON.stringify(dataValue), //传递用户编辑后的信息,这里必须是字符串
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    //再次分页加载数据并显示在页面上
                    $("#addModal").modal("hide");//关闭模态编辑框
                    classLoadListByPage();
                }else{
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function deleteOneClass(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/class/delete",
            type:"get",
            contentType:'application/x-www-form-urlencoded',//指明是普通表单提交
            data:{"id":id} ,
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    classLoadListByPage();
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
</script>
</body>
</html>
